<template>
    <div class="wrapper">
        <div>
            <div class="funs" v-for="items in funArray" :key="items.functionId">
                <span class="title" @click="toHome">{{ items.name }}</span>
                <span class="fun" v-for="item in items.funs" :key="item.functionId" @click="changeFunc(item)">
                    <span class="iconfont" :class="item.iconFont"></span>
                    <span>{{ item.name }}</span>
                </span>
            </div>
        </div>
        <component :is="showComponent"></component>
    </div>
</template>


<script>
import GroupManger from 'components/ConfigServers/GroupManger'
import PositioningSetMain from 'components/configServers/PositioningSet/PositioningSetMain'
import  PersonManage from 'components/dataCenter/PersonManage'
import OperatorManageMain from 'components/configServers/OperatorManage/OperatorManageMain.vue'
import AreaAlarmMain from 'components/configServers/PositioningSet/AreaAlarmMain.vue'
export default {
    components: { GroupManger, PositioningSetMain, PersonManage, OperatorManageMain ,AreaAlarmMain},
    props: {
        funArray:{
            type: Array,
            default: []
        },
    },
    data(){
        return {
            showComponent: ''
        };
    },
    methods:{
        toHome() {
            this.$emit("getMain", "我是传递给Home的值")
        },
        changeFunc(items) {
            this.showComponent = items.component;
        }
    },
    mounted() {
    }
}
</script>

<style scoped lang="less">
.wrapper {
    display: flex;
}
.funs {
    min-width: 130px;
    display: flex;
    flex-direction: column;
    margin: 30px 16px;
    .title {
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #525252;
        line-height: 20px;
        margin-bottom: 10px;
    }
    .fun {
        height: 17px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #737373;
        line-height: 17px;
        padding: 10px 0 10px 10px;
        margin: 0 13px;
        border-bottom: 1px solid #EEEEEE;
        cursor: pointer;
    }
}
</style>
